<template>
  <div>
    <card :width="1400" class="box" style="margin: 24px auto 0 auto">
      <!-- 顶部 -->
      <div class="top flexBet">
        <div class="bgbtn rela shou" @click="add" style="margin: 35px 0 0 40px">
          <div class="btn flex">
            <img src="@/assets/images/add1.png" alt="加载失败"/>
            创建工作站
          </div>
          <img class="btnbg absolute" src="@/assets/images/btnbg.png" alt="加载失败"/>
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="list flex"
        v-if="list.length > 0"
        v-infinite-scroll="load"
        infinite-scroll-immediate="false"
        infinite-scroll-distance="1"
        style="overflow: auto"
      >
        <div
          :class="{ active: item.active, temp: true, shou: true, rela: true }"
          @click="toDetail(item)"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="rela flex coverBox">
            <img class="cover boder" :src="item.workstationPic" alt="加载失败"/>
            <img
              class="coverTip absolute"
              :src="
                require(`@/assets/images/workstationIcon/status${item.status}${
                  item.checkStatus ? item.checkStatus : 0
                }.png`)
              "
              alt="加载失败"
            />
            <div class="hoverbox">
              <el-rate :value="item.workstationStar" disabled text-color="#ff9900"></el-rate>
            </div>
          </div>
          <div class="name overTxt">{{ item.workstationName }}</div>
          <div class="flexBet person">
            <div class="flex p">
              <img src="@/assets/images/classify/person.png" alt="加载失败"/>
              <div>
                <span>{{ item.studyNum ? item.studyNum : 0 }}</span> /
                {{ item.stuNum ? item.stuNum : 0 }}
              </div>
              <img
                style="margin-left: 26px"
                src="@/assets/images/dingwei.png"
                alt="加载失败"
              />
              <div style="max-width: 117px" class="overTxt">
                {{ item.workstationAddress }}
              </div>
            </div>

            <el-popover
              ref="popoverName"
              placement="bottom"
              trigger="click"
            >
              <!-- 页面内容 -->
              <div
                class="flex showContent"
                slot="reference"
                @click.stop=""
              ></div>
              <!-- 激活内容 -->
              <div class="hideContent">
                <!--编辑： 待提交 已驳回 已停用 已启用-->
                <div
                  v-if="
                    (item.status == 0 && item.checkStatus == 0) ||
                    (item.status == 0 && item.checkStatus == 1) ||
                    (item.status == 0 && item.checkStatus == 4) ||
                    item.status == 1
                  "
                  class="flex temp shou"
                  @click="workstationEdit(item.workstationId,item.studyNum)"
                >
                  <img src="@/assets/images/classify/handle1.png" alt="加载失败"/>编辑
                </div>
                <!-- 提交审核 -->
                <div
                  v-if="item.status == 0 && item.checkStatus == 1 && !showSync"
                  class="flex temp shou"
                  @click="workstationSubmitForReview(item, 2)"
                >
                  <img
                    src="@/assets/images/classify/handle9.png"
                    alt="加载失败"
                  />提交审核
                </div>
                <!-- 撤回：审核状态 -->
                <div
                  class="flex temp shou"
                  v-if="(item.status == 0 && item.checkStatus == 2) || (item.status == 0 && item.checkStatus == 3)"
                  @click="workstationSubmitForReview(item, 1)"
                >
                  <img src="@/assets/images/classify/handle8.png" alt="加载失败"/>撤回
                </div>
                <!-- 删除：待提交 已驳回 已停用 -->
                <div
                  class="flex temp shou"
                  v-if="
                    (item.status == 0 && item.checkStatus == 1) ||
                    (item.status == 0 && item.checkStatus == 4) ||
                    item.status == 1
                  "
                  @click="workstationDel(item)"
                >
                  <img src="@/assets/images/classify/handle4.png" alt="加载失败"/>删除
                </div>

                <!-- 停用：已启用 -->
                <div
                  class="flex temp shou"
                  v-if="item.status == 0 && item.checkStatus == 0"
                  @click="workstationStop(item, 1)"
                >
                  <img src="@/assets/images/classify/handle5.png" alt="加载失败"/>停用
                </div>
                <!-- 启用：已停用 -->
                <div
                  class="flex temp shou"
                  v-if="item.status == 1"
                  @click="workstationStop(item, 0)"
                >
                  <img src="@/assets/images/classify/handle3.png" alt="加载失败"/>启用
                </div>
                <!-- 查看驳回原因 -->
                <div
                  v-if="item.status == 0 && item.checkStatus == 4"
                  class="flex temp shou"
                  @click="workstationRejectReason(item)"
                >
                  <img
                    src="@/assets/images/classify/handle7.png"
                    alt="加载失败"
                  />驳回原因
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <div style="margin-top: 15vh" v-else>
        <el-empty description="暂无工作站~"></el-empty>
      </div>
    </card>
    <!-- 添加或修改岗位对话框 -->
    <workstationAddDia
      :type="type"
      :id="id"
      :studyNum="studyNum"
      :open.sync="open"
      @refresh="diaRefresh"
    ></workstationAddDia>
    <!-- 驳回原因 -->
    <reject :open.sync="reasonOpen" :type="3" :item="reasonItem"></reject>
  </div>
</template>

<script>
import { getWorkstationList } from '@/api/workstation/workstation'
import {
  delWorkstation,
  updateWorkstation
} from '@/api/workstation/workstation'
import workstationAddDia from '@/components/workstationAddDia'
import { getInfo } from '@/api/login'
import reject from '@/components/reject'

export default {
  components: { workstationAddDia, reject },
  data() {
    return {
      showSync: false,
      type: 1,
      id: 0,
      open: false,
      studyNum: 0,
      form: '',
      reasonOpen: false,
      reasonItem: {},
      list: [],
      value: 5,
      page: 1,
      size: 12,
      loadmore: false
    }
  },
  created() {
  },
  mounted() {
    this.getList(true)
  },
  activated() {
    console.log('activated')
  },
  methods: {
    /* 提交审核 */
    async workstationSubmitForReview(item, status) {
      let school
      if (status == 2) {
        let res = await getInfo()
        if (res.code == 200) {
          school = res.school
        }
      }
      let text = {
        1: '是否确认撤回',
        2: '是否确认提交审核'
      }
      this.$confirm(text[status], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let data = { ...item }
        data.checkStatus = status
        const loading = this.$loading({
          lock: true,
          text: '处理中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        let res = await updateWorkstation(data)
        const { code } = res
        if (code == 200) {
          loading.close()
          if (status == 1) {
            this.$modal.msgSuccess('撤回成功')
          } else {
            if (school.workstationNeedCheckBranch == 0 && school.workstationNeedCheckSchool == 0) {
              this.$modal.msgSuccess('审核已通过')
            } else {
              this.$modal.msgSuccess('提交审核成功')
            }
          }
          this.getList()
        } else {
          loading.close()
        }
      }).catch(() => {
      })
    },
    /* 驳回原因 */
    workstationRejectReason(e) {
      this.reasonOpen = true
      this.reasonItem = e
    },
    /* 添加工作站返回 */
    diaRefresh() {
      this.getList(true)
    },
    /* 编辑工作站 */
    workstationEdit(id, studyNum) {
      this.open = true
      this.type = 2
      this.studyNum = studyNum
      this.id = id
    },
    /* 更改工作站状态 */
    workstationStop(item, status) {
      this.$confirm(
        `是否确认${status == 0 ? '启用' : '停用'}【${item.workstationName}】吗?${status == 0 ? '' : `停用后【${item.workstationName}】已关联课程无影响，无法关联新课程!`}`,
        '停用确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
        const loading = this.$loading({
          lock: true,
          text: '处理中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        let data = JSON.parse(JSON.stringify(item))
        data.status = status
        let res = await updateWorkstation(data)
        if (res.code == 200) {
          loading.close()
          this.$modal.msgSuccess(`${status == 0 ? '启用' : '停用'}成功`)
          this.getList()
        } else {
          loading.close()
        }
      })
        .catch(() => {
        })
    },
    /* 删除工作站 */
    workstationDel(item) {
      this.$confirm(
        `是否确认删除【${item.workstationName}】吗?删除后不可恢复!`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '处理中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })

          let res = await delWorkstation(item.workstationId)
          if (res.code == 200) {
            loading.close()
            this.$modal.msgSuccess('删除成功')
            this.getList()
          } else {
            loading.close()
          }
        })
        .catch(() => {
        })
    },
    // 跳转工作站详情 课程页面
    toDetail(item) {
      if (item.status == 0 || item.status == 1) {
        this.$router.push({
          path: '/workstation/detail',
          query: {
            workstationId: item.workstationId
          }
        })
      }
    },
    // 添加工作站按钮
    add() {
      this.open = true
      this.type = 1
    },
    // 获取工作站列表
    async getList(e) {
      if (e) {
        this.page = 1
      }
      let params = {
        teacherId: this.$store.getters.teacherId
      }
      let res = await getWorkstationList(params)
      this.list = res.rows
    },
    // 工作站列表翻页
    load() {
      if (this.loadmore) {
        this.page = this.page + 1
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  .top {
  }

  .list {
    padding-left: 40px;
    overflow: auto;
    max-height: calc(100vh - 68px - 48px - 131px + 14px);
    margin-top: 32px;

    .temp:hover {
      box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);

      .showContent {
        display: block;
      }

      .hoverbox {
        padding: 0 10px 8px 0;
        box-sizing: border-box;
        justify-content: flex-end;
        align-items: flex-end;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        width: 302px;
        height: 182px;
        background: rgba($color: #000000, $alpha: 0.5);
        border-radius: 15px 15px 0 0;
      }
    }

    .temp {
      .hoverbox {
        display: none;
      }

      margin: 0 32px 48px 0;
      width: 304px;
      height: 266px;
      background: #ffffff;
      border-radius: 16px;
      box-sizing: border-box;
      border: 1px solid #ebebeb;

      .coverBox {
        width: 304px;
        height: 182px;
        border-radius: 16px 16px 0 0;
      }

      .cover {
        width: 302px;
        height: 182px;
        border-radius: 16px 16px 0 0;
        background: #f7f7f8;
      }

      .coverTip {
        z-index: 3;
        top: 16px;
        left: -8px;
        width: 56px;
        height: 29px;
      }

      .name {
        margin: 16px 0 0 16px;
        width: 270px;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
      }

      .person {
        padding: 0 16px 0 16px;
        margin-top: 8px;

        .p {
          img {
            margin-right: 6px;
            margin-top: 2px;
            width: 14px;
            height: 16px;
          }

          div {
            font-size: 14px;
            color: #999999;
            line-height: 20px;

            span {
              color: #28b28b;
            }
          }
        }
      }
    }
  }
}

.showContent {
  width: 27px;
  height: 16px;
  background-size: 27px 16px;
  background-image: url("../../assets/images/more1.png");
}

.showContent:hover {
  background-image: url("../../assets/images/more2.png");
}

.hideContent {
  img {
    margin: auto 17px auto 20px;
    width: 15px;
    height: 15px;
  }

  .temp {
    padding-right: 32px;
    box-sizing: border-box;
    font-size: 14px;
    color: #666666;
    line-height: 36px;
    height: 36px;
    border-bottom: 1px solid #edeff0;
  }

  .temp:hover {
    background: #f5f5f5;
  }
}
</style>
